﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <link rel="stylesheet" href="jqueryDay01Test2.css">
</head>
<body>
<!--练习-->

<div id="nav">
	<ul>
		<li><a href="#">Link one</a></li>
		<li><a href="#">Link two</a></li>
		<li><a href="#">Link three</a></li>
		<li><a href="#">Link four</a></li>
	</ul>
</div>

<!--表单-->
<form action="">
    <div>
        <!--label标签可以通过for属性，显示关联到指定id的input标签-->
        <label for="name" class="labelText">请输入ID：</label>
        <input type="text" name="id" id="id">
    </div>
    <div>
        <!--label标签可以通过for属性，显示关联到指定id的input标签-->
        <label for="name" class="labelText">请输入姓名：</label>
        <input type="text" name="name" id="name">
    </div>
    <div>
        <label class="labelText">请输入性别：</label>
        <!--label隐式关联input输入域-->
        <span id="sexSpan">
            <label>
            	<input type="radio" name="sex" value="男">男
            </label>
            <label>
                <input type="radio" name="sex" value="女" checked>女
            </label>
        </span>
    </div>
    <div>
        <label class="labelText">请选择爱好：</label>
        <span id="sexSpan">
            <label>
            	<input type="checkbox" name="hobby" value="逛街">逛街
            </label>
            <label>
                <input type="checkbox" name="hobby" value="音乐" >音乐
            </label>
            <label>
                <input type="checkbox" name="hobby" value="运动" >运动
            </label>
        </span>
    </div>

    <div>
        <span class="spanBut">
            <input id="addBut" type="button" value="追加">
        </span>
        <span class="spanBut">
            <input type="reset" value="重置">
        </span>
        <span class="spanBut">
            <input type="button" value="清空表格" id="clearBut">
        </span>
    </div>
</form>

<hr>

<!--显示数据-->
<table id="mytable">
    <caption>个人信息一览表</caption>
    <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>性别</th>
        <th>爱好</th>
    </tr>
    
    
    
</table>

<br><br><br><br><br>
<script type="text/javascript" src="jquery-1.11.3.js"></script>
<script type="text/javascript" src="jqueryDay01Test2.js"></script>
</body>
</html>